import React, { useState } from 'react';
import { Form, Input, Button, Modal, Descriptions } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getMemberList, getMemberDetailsInfo, frozenMember, unFrozenMember } from './service'
import TableTitle from '../../../components/TableTitle'

export default () => {
  const { TextArea } = Input;
  // 查看模态框控制
  const [isCheckDetailInfoModal, setIsCheckDetailInfoModal] = useState(false);

  // 冻结模态框控制
  const [isFrozenModal, setIsFrozenModal] = useState(false);
  // 确认 获取原因表单
  const reasonFormRef: any = React.createRef();
  // 存储查看的详情数据 冻结操作这一行的信息
  const [memberInfo, setMemberInfo] = useState({});

  // 处理冻结
  const handleFrozenInfoOk = async () => {
    // 表单验证
    reasonFormRef.current.validateFields().then(async () => {
      // 获取新增表单的值
      var reponse = reasonFormRef.current?.getFieldsValue()
      console.log(reponse)
      const { refusalCause: reason } = reponse
      let data = {
        custNo: memberInfo.custNo,
        reason
      }
      console.log('1111', memberInfo);
      memberInfo.custStatus === '0' ?
        await frozenMember(data) :
        await unFrozenMember(data).then((res) => {
          console.log(res);
        })
      // 表格重刷新
      actionRef.current?.reload()
      // 重置表单
      reasonFormRef.current.resetFields();
      // 关闭冻结模态框
      setIsFrozenModal(false)
    }).catch(() => { })
  }

  // Table action 的引用，便于自定义触发
  const actionRef = React.useRef<ActionType>();

  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) =>
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      <li>
        <a onClick={() => { frozenInfo(record) }} className="ant-dropdown-trigger">
          {record.custStatus === '0' ? "冻结" : record.custStatus === '1' ? '解冻' : ''}
        </a>
      </li>
    </ul>
  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? item.render = actionRender : undefined
  });

  // 查看
  const checkDetailInfo = async (custNo: string) => {
    console.log('🎉', custNo);

    const memberInfo = await getMemberDetailsInfo({ custNo })
    setMemberInfo(memberInfo.body)
    setIsCheckDetailInfoModal(true)
  }

  // 冻结
  const frozenInfo = (record) => {
    console.log(record);
    // 冻结的信息
    setMemberInfo(record)
    setIsFrozenModal(true)
  }

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle={<TableTitle title='会员信息' />}
        scroll={{ x: 900 }}
        actionRef={actionRef}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={
          async params => {
            console.log(params);
            let data = await getMemberList({ ...params, pageNum: params.current })
            console.log('😒', data);
            const result = {
              data: data.body.list,
              total: data.body.total,
            }
            return result;
          }
        }
        rowKey="custNo"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      {/* 查看模态框 */}
      <Modal
        title="会员信息"
        width={1000}
        centered
        footer={<Button type="primary" htmlType="submit" onClick={() => setIsCheckDetailInfoModal(false)}>
          确认
        </Button>}
        visible={isCheckDetailInfoModal}
        onCancel={() => setIsCheckDetailInfoModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="会员名">{memberInfo.custName}</Descriptions.Item>
          <Descriptions.Item label="会员号">{memberInfo.custNo}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{memberInfo.email}</Descriptions.Item>
          <Descriptions.Item label="会员状态">
            {
              memberInfo.custStatus === '0' ? '正常' :
                memberInfo.custStatus === '1' ? '冻结' :
                  memberInfo.custStatus === '2' ? '注销' :
                    '未激活'
            }
          </Descriptions.Item>
          <Descriptions.Item label="注册日期">{memberInfo.openDate}</Descriptions.Item>
          <Descriptions.Item label="电话">{memberInfo.mobile}</Descriptions.Item>
        </Descriptions>
      </Modal>
      {/* 冻结模态框 */}
      <Modal
        title={<div>
          <span>会员名: {memberInfo.custName}</span>
          <span style={{ marginLeft: 20 }}>会员号: {memberInfo.custNo}</span>
        </div>}
        centered
        visible={isFrozenModal}
        onOk={handleFrozenInfoOk}
        onCancel={() => {
          setIsFrozenModal(false),
            // 重置表单
            reasonFormRef.current.resetFields();
        }}
      >
        <Form
          name="basic"
          ref={reasonFormRef}
          wrapperCol={{ span: 24 }}
          autoComplete="off"
        >
          <Form.Item
            key="refusalCause"
            name="refusalCause"
            rules={[{
              required: true,
              whitespace: true,
              message: '请填写原因'
            }]}
          >
            <TextArea rows={4} placeholder="请输入原因" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};